<template>
  <div id="app">
    <div class="container">
      <ControlPanel/>
      <GraphPanel/>
    </div>
  </div>
</template>

<script>

import { mapActions ,mapGetters} from "vuex";
import ControlPanel from "./views/ControlPanel"
import GraphPanel from "./views/GraphPanel"
export default {
  name:"app",
  components:{
   ControlPanel,
   GraphPanel,
  },
  methods:{
    ...mapActions(["fetchTrees","fetchTree","fetchTreeId","fetchPersonInfo","fetchLocation",'fetchClusters']),
  },
  created(){
    this.fetchTrees();
    this.fetchLocation();
    this.fetchClusters();
  },
  mounted(){
    
  }
}
</script>


<style>
html,body,#app{
  width:100%;
  height:100%;
  overflow: hidden;
  box-sizing: border-box;
}
*{
  margin:0;
  padding:0;
}
[v-cloak]{
  display: none !important;
}
body{
  padding:5px 5px 10px 5px;
}
.container{
  width:100%;
  height:100%;
  box-sizing:border-box;
  /* border:2px solid #ccc; */
}
.boxContent{
    width:100%;
    height:100%;
    border:1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
</style>
